<template>
  <div>
    <van-index-anchor index="热门城市" />
   <van-cell v-for="(item,index) in cityHot" :key='index' :title="item.label" @click="changeCity(item.label)"/><!--当前城市步骤 1.点击每个热门城市名 发送axios请求 获取当前城市数据  只有这四个城市可以点-->
  </div>
</template>

<script>
import { cityNow, cityHot } from '@/api/user'
import { setcityName, setcityValue } from '@/utils/storage'

export default {
  data () {
    return {
      cityHot: [],
      cityname: '',
      cityValue: ''
    }
  },
  async created () {
    // 热门城市请求
    const { body } = await cityHot()
    console.log(body)
    this.cityHot = body
  },
  methods: {
    /* 2.点击事件 当前城市请求数据 */
    async  changeCity (name) {
      const { body } = await cityNow(name)
      console.log(body)
      this.cityname = body.label
      this.cityValue = body.value
      /* 3.存本地 */
      setcityName(this.cityname)
      setcityValue(this.cityValue)
      /* 4.跳转首页 */
      this.$router.push('/')
    }

  }

}
</script>

<style>

</style>
